<template>
    <div class="st b">
      <!-- 登录状态 -->
      <div class="user">
        <span v-show="u" class="user-p">未登录</span> 
        <span v-show="!u" class="user-p logout" @click="logout">欢迎:{{user.uname}}</span> 
      </div>
    <!-- 新增歌曲 -->
      <div class="left-seletion">
        <div class="tips-b">新增曲目</div>
        <div class="div-add-song b"><input placeholder="输入歌名" v-model="aSong.name" class="input-song"></div>
        <div class="div-add-song b"><input placeholder="输入歌手" v-model="aSong.singer" class="input-song"></div>
        <div class="div-add-song b"><input placeholder="输入外链ID" v-model="aSong.urlID" class="input-song"></div>
        <div class="tips-b">封面</div>
        <div class="div-add-song b">
          <div class="file-button" @click="openFileInput(1)">选择图片</div>
          <input class="file-input" type="file" id="file-input-img" accept=".png, .jpg" ref="img" @change="changeImg($event)">
        </div>
        <div class="tips-b">歌词</div> 
        <div class="div-add-song b">
          <div class="file-button" @click="openFileInput(2)">上传歌词</div>
          <input class="file-input" type="file" id="file-input-lyric" accept=".txt" ref="lyric" @change="changeLyric($event)">
        </div>
        <div class="tips-s">分类</div>
        <select class="input-type b" title="选择分类" v-model="aSong.type">
          <option value="" hidden selected>选择音乐分类</option>
          <option v-for="type,index in types" :key="index" class="input-type-option">{{type}}</option>
        </select>
        <div class="div-add-song-enter b" @click="addSong()">确定</div>
      </div>
      <!-- 搜索框 -->
      <div class="song-query b">
        <input type="text" placeholder="根据歌名搜索" class="song-query-input" v-model="inputStr" @keyup.enter="queryByKeyword(inputStr)">
      </div>
      <div class="song-query-enter b" @click="queryByKeyword(inputStr)">搜索</div>
      <!-- 主页图标 -->
        <div class="home-logo" @click="toIndex">
      <!-- <img src="http://localhost:8098/MusicWebSpringboot/image/test.png" alt="" class="img-home"> -->
          <img src="../assets/image/Home.png" alt="" class="img-home">
          <span class="text-home">HOME</span>
        </div>
      <!-- 登录与后台 -->
      <div class="link">
        <img src="../assets/image/Login.png" alt="" class="img-login" @click="toLogin">
        <img src="../assets/image/Setting.png" alt="" class="img-setting" @click="toSetting">
      </div>
      <!-- 曲目列表 -->
      <div class="song-list b">
        <table class="song-list-table">
          <thead>
            <td class="thead-song-name">歌名({{listLength}})</td>
            <td class="thead-song-singer">歌手</td>
            <td class="thead-song-play-time">播放次数</td>
            <td class="thead-song-creation-time">收录时间</td>
            <td class="thead-song-setting">操作</td>
          </thead>
          <template v-for="song,index in songlist">
            <tr :key="index">
              <td class="td-song-name" @click="setSongInPlayer(song.musicUrlID)">{{song.musicName}}</td>
              <td class="td-song-singer">{{song.musicSinger}}</td>
              <td class="td-song-play-time">{{song.musicPlayTimes}}&nbsp;次</td>
              <td class="td-song-creation-time">{{song.musicCreationTime}}</td>
              <td class="td-song-setting"><span class="edit" @click="openEdit(song.mid);">编辑</span>/<span class="delete" @click="deleteSong(song.mid)">删除</span></td>
            </tr>
            <tr :key="index"><td colspan="5"><div class="line b"></div></td></tr>
          </template>
        </table>
      </div>
      <!-- 编辑框 -->
      <div class="div-edit b" id="edit">
        <div class="edit-text">✎请输入编辑信息</div>
        <div class="div-edit-input b"><input type="text" class="edit-input" placeholder="输入歌名" v-model="eSong.name"></div>
        <div class="div-edit-input b"><input type="text" class="edit-input" placeholder="输入歌手" v-model="eSong.singer"></div>
        <div class="div-edit-input b">
          <select name="" id="" v-model="eSong.type" class="edit-type-select edit-input">
            <option v-for="type,index in types" :key="index" class="edit-type-option">{{type}}</option>
          </select>
        </div>
        <div class="div-edit-input b"><input type="text" class="edit-input" placeholder="输入外链ID" v-model="eSong.urlID"></div>
        <div class="div-edit-final">
          <div class="edit-enter b" @click="editSong(mid)">确定</div>
          <div class="edit-cancel b" @click="closeEdit()">取消</div>
        </div>
      </div>
      <!-- 播放器 -->
      <div class="song-player b">
        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" class="iframe163"
          :src="set163id(playerID)"></iframe>
      </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data:function(){
      return{
        songlist:[],
        types:["说唱", "流行"],
        seletions:["全部歌曲","我的喜欢","说唱","流行"],
        inputStr:"",
        playerID:0,
        aSong:{
          name:'',
          singer:'',
          type:'',
          img:'',
          urlID:''
        },
        mid:'',
        eSong:{
          name:'',
          singer:'',
          type:'',
          urlID:''
        },
        qeSong:{},
        imgFile:undefined,
        lyricFile:undefined
      }
    },
    computed:{
      ...mapState(['user']),
      listLength:function(){
        return this.songlist.length
      },
      u:function() {
        return this.user.uname === undefined
      }
    },
    methods:{
      // 关键字查询歌曲
      queryByKeyword:function(){
        this.$axios.get("/api/querySongByKeyword",{
          params:{
            keyword:this.inputStr
          }
        }).then((response)=>{
          this.songlist = response.data
        })
      },
      // 设置当前播放器歌曲
      setSongInPlayer:function(musicUrlID, mid) {
        this.playerID = musicUrlID
        this.addPlayTimes(mid)
      },
      // 增加播放次数
      addPlayTimes:function(mid) {
        this.$axios({
          url:'/api/addPlayTimesByMid',
          method:"post",
          params:{
            mid:mid
          }
        }).then((response)=>{
            this.songlist = response.data
        })
      },
      // 设置外链
      set163id:function(id){
        return "//music.163.com/outchain/player?type=2&id=" + id + "&auto=1&height=100"
      },
      // 转去主页
      toIndex:function() {
        this.$router.push('/index')
      },
      // 转去后台
      toSetting:function(){
        this.$router.push('/setting')
      },
      toLogin:function(){
        this.$router.push('/login')
      },
      // 注销
      logout:function(){
        this.$confirm('要注销了吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.user.uname = undefined
            this.$message({
              type: 'info',
              message: '用户已注销'
            }); 
          })
      },
      // 打开文件上传
      openFileInput:function(num) {
        if (num === 1) {
          document.getElementById("file-input-img").click()
        }
        if (num === 2) {
          document.getElementById("file-input-lyric").click()
        }
      },
      changeImg:function(event){
        this.imgFile = event.target.files[0]
      },
      changeLyric:function(event){
        this.lyricFile = event.target.files[0]
      },
      // 添加歌曲
      addSong:function() {
        var formData = new window.FormData();
        if (this.imgFile != undefined) {
            formData.append("imgFile", this.imgFile);
        }
        if (this.lyricFile != undefined) {
            formData.append("lyricFile", this.lyricFile);
        }
        // 文件上传
        this.$axios({
          url:'/api/uploadFile',
          method:"post",
          data:formData
        }).then((response) =>{
          if (response.data === "Success") {
              this.$notify({
                title: '√',
                message: '文件载入成功'
              });
          }
        })
        // 基本信息
        this.$axios({
          url:'/api/insertSong',
          method:"post",
          data:[JSON.stringify(
            {
              mid:' ',
              musicName: this.aSong.name,
              musicSinger: this.aSong.singer,
              musicLyric: ' ',
              musicType: this.aSong.type,
              musicImg: ' ',
              musicUrlID: this.aSong.urlID,
              musicCreationTime: ' ',
              musicPlayTimes: 0,
              musicScore: 0,
              musicComment: ' '
            }
          )]
        }, {headers: {'Content-Type':'application/json; charset=utf-8'}}).then((response)=>{
            if (response.data === "Success") {
              this.$notify({
                title: '√',
                message: '歌曲收录成功'
              });
            } else {
              this.$notify({
                title: 'error',
                message: '歌曲收录失败'
              });
            }
        })
      },
      // 打开编辑框
      openEdit:function(mid) {
        this.mid=mid;
        document.getElementById("edit").style.cssText = "top:230px;"
        this.$axios.get('/api/querySongByMid', {
          params:{
            mid:mid
          }
        }).then((response)=>{
          this.eSong.name = response.data.musicName
          this.eSong.singer = response.data.musicSinger
          this.eSong.type = response.data.musicType
          this.eSong.urlID = response.data.musicUrlID
        })
      },
      // 关闭编辑框
      closeEdit:function() {
        document.getElementById("edit").style.cssText = "top:-400px;"
      },
      // 编辑歌曲
      editSong:function() {
        this.$axios({
          url:'/api/updateSongByMid',
          method:"post",
          data:[JSON.stringify(
            {
              mid:this.mid,
              musicName: this.eSong.name,
              musicSinger: this.eSong.singer,
              musicLyric: ' ',
              musicType: this.eSong.type,
              musicImg: ' ',
              musicUrlID: this.eSong.urlID,
              musicCreationTime: ' ',
              musicPlayTimes: 0,
              musicScore: 0,
              musicComment: ' '
            }
          )]
        }, {headers: {'Content-Type':'application/json; charset=utf-8'}}).then((response)=>{
          console.log(response.data);
            if (response.data === "Success") {
              this.$notify({
                title: '√',
                message: '编辑成功'
              });
            } else {
              this.$notify({
                title: 'error',
                message: '编辑失败'
              });
            }
            this.closeEdit()
        })
      },
      // 删除歌曲
      deleteSong:function(mid) {
        this.$axios({
          url:'/api/deleteSongByMid',
          method:'post',
          data:{
            mid:mid
          }
        }).then((response)=>{
          if (response.data === "Success") {
            this.$notify({
                title: 'Success',
                message: '删除成功'
            });
          } else {
            this.$notify({
                title: 'Fail',
                message: '删除失败'
            });
          }
        })
      }
    },
    created:function(){
      // 所有曲目
      this.$axios.get("/api/queryAllSongs").then((response)=>{
        this.songlist = response.data
      })
      // 所有类型
      // this.$axios.get("/queryAllTypes").then((response)=>{
      //   this.types = response.data
      // })
    },
    watch:{
      'aSong.name':function(name){
        console.log(name);
        this.$axios.get('/music163/search',{
          params:{
            keywords:name
          }
        }).then((response)=>{
            this.$notify({
                title: 'Match',
                message: '动态获取网易云外链ID成功'
            });
          console.log(response.data);
          this.aSong.urlID = response.data.result.songs[0].id
          console.log(this.aSong.urlID)
        })
      }
    }
}
</script>

<style scoped>
.b{
  border: 2px black solid;
}
.st{
  width: 100%;
  min-height:98vh;
  position: relative;
}
.song-query{
  position: absolute;
  top: 60px;
  left: 380px;
  width: 400px;
  height: 35px;
}
.song-query-input{
  outline: none;
  border: none;
  position: relative;
  left: 10px;
  height: 32px;
  width: 380px;
  font-size: 20px;
}
.song-query-enter{
  position:absolute;
  top: 60px;
  left: 780px;
  width: 100px;
  height: 35px;
  background: #000;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 35px;
  cursor: pointer;
}
.song-list{
  position: absolute;
  top: 130px;
  left: 350px;
  width: 73%;
  height: 650px;
  font-size: 21px;
}
.line{
  margin-top: 5px;
  margin-bottom: 5px;
  border-bottom: none;
}

.song-list-table{
  padding-left: 50px;
  padding-top: 15px;
}
.thead-song-name{
  width: 600px;
  padding-bottom: 20px;
}
.thead-song-singer{
  width: 200px;
  padding-bottom: 20px;
}
.thead-song-play-time{
  width: 200px;
  padding-bottom: 20px;
}
.thead-song-creation-time{
  width: 300px;
  padding-bottom: 20px;
}
.thead-song-setting{
  width: 200px;
  padding-bottom: 20px;
}
.td-song-name:hover{
  cursor: pointer;
}
.td-song-play-time{
  padding-left: 40px;
}
.edit:hover{
  cursor: pointer;
  color: #2257ac;
  transition: ease-in-out 0.2s;
}
.delete:hover{
  cursor: pointer;
  color: #ac2222;
  transition: ease-in-out 0.2s;
}


.left-seletion{
  position: absolute;
  top: 130px;
  left: 50px;
  width: 250px;
  height: 600px;
}
.seletion{
  width: 100%;
  height: 50px;
  margin-bottom: 35px;
  text-align: center;
  line-height: 50px;
  font-size: 21px;
  cursor: pointer;
}
.seletion:hover{
  background: #3d3d3d;
  color: #fff;
  transition: ease-in-out 0.1s;
}
.song-player{
  position: absolute;
  bottom: 0;
  height: 150px;
  width: 100%;
  border-left: none;
  border-right: none;
  border-bottom: none;
}
.iframe163{
  width: 100%;
}
.link{
  position:absolute;
  left: 1750px;
  top: 20px;
  width: 5.5%;
  height: 50px;
}

.img-login{
  position:absolute;
  left: 0;
  width: 50px;
  cursor: pointer;
}

.img-setting{
  position:absolute;
  right: 0;
  top: 5px;
  width: 40px;
  cursor: pointer;
}
.home-logo{
  position:absolute;
  left: 20px;
  top: 15px;
  width: 5%;
  height: 40px;
  cursor: pointer;
}
.img-home{
  position:relative;
  left: 0;
  width: 35px;
}
.text-home{
  position:absolute;
  left: 45px;
  top: 10px;
  font-size: 15px;
}
.tips-b{
  font-size: 21px;
}
.tips-s{
  font-size: 21px;
}
.div-add-song{
  width: 99%;
  height: 30px;
  margin-top: 15px;
  margin-bottom: 20px;
  font-size: 21px;
  overflow: hidden;
}
.div-add-song-enter{
  width: 99%;
  height: 35px;
  margin-top: 35px;
  margin-bottom: 20px;
  font-size: 21px;
  text-align: center;
  line-height: 30px;
  background: #000;
  color: #fff;
  cursor: pointer;
}
.div-add-song-enter:hover{
  background: #8a1515;
  color: #eedddd;
  transition: ease-in-out 0.5s;
}
.input-song{
  border: none;
  outline: none;
  font-size: 20px;
}
.input-type{
  width: 250px;
  height: 40px;
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 20px;
}
.input-type-option{
  font-size: 21px;
}
.file-input{
  margin-left: 20px;
}
.file-button{
  width: 90px;
  background: #000;
  color: #fff;
  text-align: center;
  font-size: 18px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
  position:absolute;
  left: 0;
}
.div-edit{
  position:relative;
  left: 35%;
  top: -400px;
  width: 30%;
  height: 370px;
  z-index: 150;
  background: #fff;
  transition: ease-in-out 0.7s;
}
.div-edit-final{
  width: 90%;
  height: 40px;
  position: relative;
  left: 25px;
  margin-top: 20px;
}
.edit-enter{
  position:absolute;
  left: 0;
  width: 47%;
  height: 100%;
  background: #000;
  color: #fff;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}
.edit-cancel{
  position: absolute;
  right: 0;
  width: 47%;
  height: 100%;
  background: #fff;
  color: #000;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}
.edit-text{
  font-size: 20px;
  padding: 20px;
}
.div-edit-input{
  width: 90%;
  height: 35px;
  position: relative;
  left: 25px;
  margin-bottom: 13px;
}
.edit-input{
  position: relative;
  left: 10px;
  width: 96%;
  height: 28px;
  border: none;
  outline: none;
  font-size: 20px;
}
.user{
  position: absolute;
  top: 3%;
  right: 8%;
  height: 30px;
  width: 120px;
  font-size: 20px;
}
.user-p{
  position:absolute;
  top: 0;
}
.logout{
  cursor: pointer;
}
</style>